<%--
  Created by IntelliJ IDEA.
  User: gaosubo3000
  Date: 2020/9/15
  Time: 10:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>项目变更审核（学院科研室主任）</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/lib/layui/layui/css/layui.css"/>
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery/jquery.cookie.js"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/js/common/fileupload.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
    <script src="/lib/ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/ueditor/ueditor.all.js?20200715.1" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/ueditor/UEcontroller.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/ueditor/formdesign/bootstrap/js/bootstrap.js?20200826" type="text/javascript"
            charset="utf-8"></script>
    <style>
        .mbox {
            padding: 8px
        }

        .item img {
            height: 40px;
        }

        .btn {
            height: 30px;
        }

        .btn button {
            float: right;
        }

        .information {
            background: #e8f4fc;
            height: 30px;
            line-height: 30px;
        }

        .layui-form-label {
            width: 77px;
        }

        .openFile input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 18px;
            z-index: 99;
            opacity: 0;
        }
        .layui-table-cell .layui-form-checkbox[lay-skin=primary]{
            top: 5px;
        }
        .operationDiv {
            display: none;
            position: absolute;
            top: -50px;
            left: 5px;
            background: #fff;
            box-shadow: 0 0 5px 0 rgb(0, 0, 0);
            border-radius: 5px;
        }
        .divShow {
            position: relative;
        }
        .divShow:hover .operationDiv {
            display: block;
        }

    </style>
</head>
<body>
<div class="content">

    <div class="mbox">
        <div class="item">
            <img src="../img/yeji.png" alt="" style="margin: 0 5px 0 20px;"> <span
                style="font-size: 22px;display: inline-block;vertical-align: middle;">项目变更审核（学院科研室主任）</span>
        </div>
        <hr class="layui-bg-blue">


    </div>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0;">
        <ul class="layui-tab-title">
            <li class="layui-this">全部</li>
            <li>终止</li>
            <li>延期</li>
            <li>修改</li>
            <li>主持人变更</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="btn">
                    <button type="button" class="layui-btn layui-btn-sm" style="background: #2b7fe0"><i
                            class="layui-icon layui-icon-upload-drag" style="background: #2b7fe0"></i>导出Excel
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm" id="moreCheck" style="background: #2b7fe0;margin-right: 20px"><i
                            class="layui-icon layui-icon-addition"  style="vertical-align: inherit"></i>批量审批
                    </button>
                </div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    {{# if(d.trStatus==1){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="check">审批</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-xs" style="cursor: not-allowed;background: #C1C1C1">审批</a>
    {{# } }}
</script>
<script>
    layui.use(['table', 'form', 'laydate', 'element', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            element = layui.element;
        var projectType={}
        $.ajax({
            url:'/RpmDictonary/selectDictionaryByNo',
            dataType: 'json',
            type: 'get',
            data:{
                dictNo:'PROJECT_TYPE'
            },
            success: function (res) {
                var data = res.data
                data.forEach(function (v,i) {
                    projectType[v.dictNo]=v.dictName
                })
            }
        })
        var tableIns = null

        function tableShow(type) {
            tableIns = table.render({
                elem: '#test'
                , url: '/process/selectChangeExamine'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'topicName', title: '项目名称'}
                    , {field: 'planName', title: '申报计划名称'}
                    , {field: 'participantName', title: '项目成员'}
                    , {field: 'userName', title: '负责人'}
                    , {field: 'trStatus', title: '状态',templet:function (d) {
                            if(d.trStatus=='1'){
                                return '待审批'
                            }else if(d.trStatus=='2'){
                                return '已批准'
                            }else if(d.trStatus=='3'){
                                return '未批准'
                            }else{
                                return ''
                            }
                        }}
                    , {title: '操作', toolbar: '#barDemo'}
                ]]
                , page: true,
                where: {useFlag: true, type: type},
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "count": res.totleNum, //解析数据长度
                        "data": res.obj //解析数据列表
                    };
                }
            });
        }

        tableShow('')
        element.on('tab(docDemoTabBrief)', function (data) {
            if (data.index == 0) {
                tableShow('')
            } else if (data.index == 1) {
                tableShow(1)
            } else if (data.index == 2) {
                tableShow(2)
            } else if (data.index == 3) {
                tableShow(3)
            }else if (data.index == 4) {
                tableShow(4)
            }
        });

        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'check'){
                layer.open({
                    type: 1,
                    title: '审批',
                    btn: ['确定', '取消'],
                    area: ['20%', '30%'],
                    content: '<div class="layui-form" style="width: 70%;margin: 15px auto">' +
                        '<div class="layui-form-item">\n' +
                        ' <input type="radio" name="trStatus" value="2" title="同意" checked>' +
                        ' <input type="radio" name="trStatus" value="3" title="不同意">'+
                        '    </div>'+
                        '</div>',
                    success: function(){
                        form.render('radio')
                    },
                    yes: function (index) {
                        var trStatus=$('[name="trStatus"]:checked').val()
                        var arr=[]
                        var obj={
                            trId:data.trId,
                            topicId:data.topicId,
                            trStatus:trStatus,
                            trType:data.trType,
                            trTime:data.trTime,
                            trOther2:data.trOther2,
                            trOther4:data.trOther4,
                            trOther7:data.trOther7,
                            planId:data.planId,
                            trOther9:data.trOther9,
                            trOther10:data.trOther10,
                        }
                        arr.push(obj)
                        $.ajax({
                            url:'/process/updateChangeStatus',
                            dataType:'json',
                            type:'post',
                            data:JSON.stringify(arr),
                            contentType:"application/json;charset=UTF-8",
                            success:function(res){
                                if(res.flag){
                                    layer.msg('保存成功！',{icon:1});
                                }
                                layer.close(index)
                                tableIns.config.where._ = new Date().getTime();
                                tableIns.reload()
                            }
                        })
                    },
                });
            }else if(layEvent==='detail'){
                tool(data.trOther7,data)
            }
        });
        function tool(type,data) {
            var title
            if(type=='1'){
                title='终止详情'
            }else if(type=='3'){
                title='修改详情'
            }else if(type=='2'){
                title='延期详情'
            }else if(type=='4'){
                title='主持人变更详情'
            }
            layer.open({
                type: 1,
                title: title,
                shade: 0.5,
                maxmin:true,
                area: ['60%', '70%'],
                content: '<div style="padding: 8px">' +
                    '<table class="layui-table">\n' +
                    '  <tbody>\n' +
                    '    <tr class="threeBtn">\n' +
                    '      <td>'+function () {
                        if(type=='1'){
                            return '终止原因:'
                        }else if(type=='3'){
                            return '变更原因:'
                        }else if(type=='2'){
                            return '延期原因:'
                        }else {
                            return ''
                        }
                    }()+'</td>\n' +
                    '      <td>'+(data.trOther || '')+'</td>\n' +
                    '      <td>'+function () {
                        if(type=='1'){
                            return '终止日期:'
                        }else if(type=='3'){
                            return '变更日期:'
                        }else if(type=='2'){
                            return '延期日期:'
                        }else{
                            return ''
                        }
                    }()+'</td>\n' +
                    '      <td>'+(data.trTime ? data.trTime.split(' ')[0] : '')+'</td>\n' +
                    '    </tr>\n' +
                    function () {
                        if(type==3){
                            return '    <tr>\n' +
                                '      <td>变更事项</td>\n' +
                                '      <td colspan="3"><div>负责人:'+(data.userName || '')+'</div><div>参与人员:'+(data.name || '')+'</div></td>\n' +
                                '    </tr>'
                        }else{
                            return ''
                        }
                    }()+
                    '    <tr class="threeBtn">\n' +
                    '      <td>附件</td>\n' +
                    '      <td colspan="3">'+function () {
                        var str = '';
                        if (!!data.attachmentList1 && data.attachmentList1.length > 0) {
                            data.attachmentList1.forEach(function(item){
                                var attachName = item.attachName;
                                var fileExtension=attachName.substring(attachName.lastIndexOf(".")+1,attachName.length);//截取附件文件后缀
                                var attName = encodeURI(attachName).replace(/\+/g, "%2b").replace(/\@/g,"%40").replace(/#/g,"%23").replace(/\&/g,"%26").replace(/\//g,"%2F").replace(/\?/g,"%3F").replace(/\￥/g,"%ef%bf%a5").replace(/$/g,"%24").replace(/\！/g,"%ef%bc%81").replace(/\（/g,"%ef%bc%88").replace(/\）/g,"%ef%bc%89").replace(/\…/g,"%e2%80%a6%e2%80%a6");
                                var fileExtensionName=attName.substring(0,attName.lastIndexOf("."));
                                var attachmentUrl = item.attUrl;
                                attachmentUrl = attachmentUrl.substring(0,attachmentUrl.lastIndexOf("ATTACHMENT_NAME="))+"ATTACHMENT_NAME="+fileExtensionName+"."+fileExtension; //处理附件名字

                                fileExtension = fileExtension.toLowerCase();

                                str+= '<div class="divShow"><a href="javascript:;" title="'+item.attachName+'" style="display: block; overflow: hidden;text-overflow: ellipsis;color: blue;">'+item.attachName+'</a>' +
                                    '<div class="operationDiv">'+function(){
                                        if(fileExtension == 'pdf' || fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'txt') { //判断是否需要查阅
                                            return '<a class="operation yulan"  href="javascript:void(0);" data-url="' + encodeURI(attachmentUrl) + '" style="display: block;padding: 5px;"><img src="/img/attachmentIcon/icon_skim.png" style="margin-right: 5px;" alt="">查阅</a>'
                                        }else{
                                            return '<a class="operation yulan"  href="javascript:void(0);" data-url="' + attachmentUrl + '" style="display: block;padding: 5px;"><img src="/img/attachmentIcon/icon_skim.png" style="margin-right: 5px;" alt="">查阅</a>'
                                        }
                                    }()+
                                    '<a class="operation" style="display: block;padding: 0 5px 5px 5px;" href="/download?' + encodeURI(attachmentUrl) + '"><img src="/img/attachmentIcon/icon_down.png" style="margin-right: 5px;" alt="">下载</a>'
                                    +'</div>' +
                                    '</div>'
                            });
                        }
                        return str
                    }()+'</td>\n' +
                    '    </tr>'+
                    '    <tr class="threeBtn">\n' +
                    '      <td>变更事由</td>\n' +
                    '      <td colspan="3">'+(data.trOther8 || '')+'</td>\n' +
                    '    </tr>'+
                    '    <tr class="oneBtn">\n' +
                    '      <td width="100">第一主持人单位</td>\n' +
                    '      <td>'+(data.trOther8 || '')+'</td>\n' +
                    '      <td width="100">第二主持人单位</td>\n' +
                    '      <td>'+(data.trOther10 || '')+'</td>\n' +
                    '    </tr>\n' +
                    '  </tbody>\n' +
                    '</table>'+
                    '</div>',
                success:function () {
                    if(type=='4'){
                        $('.oneBtn').show()
                        $('.threeBtn').hide()
                    }else{
                        $('.oneBtn').hide()
                        $('.threeBtn').show()
                    }
                }
            })
        }

        //批量审核
        $('#moreCheck').click(function () {
            var checkStatus = table.checkStatus('test');
            if(!checkStatus.data.length){
                layer.msg('请至少选择一项！',{icon:0});
                return false
            }
            layer.open({
                type: 1,
                title: '审批',
                btn: ['确定', '取消'],
                area: ['20%', '30%'],
                content: '<div class="layui-form" style="width: 70%;margin: 15px auto">' +
                    '<div class="layui-form-item">\n' +
                    ' <input type="radio" name="trStatus" value="2" title="同意" checked>' +
                    ' <input type="radio" name="trStatus" value="3" title="不同意">'+
                    '    </div>'+
                    '</div>',
                success: function(){
                    form.render('radio')
                },
                yes: function (index) {
                    var trStatus=$('[name="trStatus"]:checked').val()
                    var arr=[]
                    checkStatus.data.forEach(function (v,i) {
                        var obj={}
                        obj.trId=v.trId,
                        obj.topicId=v.topicId
                        obj.trStatus=trStatus
                        obj.trType=v.trType
                        obj.trTime=v.trTime
                        obj.trOther2=v.trOther2
                        obj.trOther4=v.trOther4
                        obj.trOther7=v.trOther7
                        obj.planId=v.planId
                        obj.trOther9=v.trOther9
                        obj.trOther10=v.trOther10
                        arr.push(obj)
                    })
                    $.ajax({
                        url:'/process/updateChangeStatus',
                        dataType:'json',
                        type:'post',
                        data:JSON.stringify(arr),
                        contentType:"application/json;charset=UTF-8",
                        success:function(res){
                            if(res.flag){
                                layer.msg('保存成功！',{icon:1});
                            }
                            layer.close(index)
                            tableIns.config.where._ = new Date().getTime();
                            tableIns.reload()
                        }
                    })
                },
            });
        })

        // 附件查阅
        $(document).on('click', '.yulan', function () {
            var url = $(this).attr('data-url');
            pdurl($.UrlGetRequest('?' + url), url);
        });

    });
</script>
